<template>
  <div class="mine">
    <!-- 上半部分 -->
    <div class="main-t">
      <!-- 导航栏 -->
      <div class="banner">
        <van-nav-bar title="我的"></van-nav-bar>
      </div>
      <!-- 我的面板 -->
      <div class="panel">
        <div class="panel-l">
          <div class="avter">
            <img :src="avaterImg">
          </div>
        </div>
        <div class="panel-r">
          <div class="username">Hi 看到我请叫我滚去学习</div>
          <div class="userTag">今天是你记账的第605天啦😎</div>
        </div>
      </div>
      <!-- 帮助中心 -->
      <div class="help-center">
        <div class="help-center-text">
          <div class="help-center-text-t">帮助中心</div>
          <div class="help-center-text-b">疑难杂症点这里</div>
        </div>
        <div class="help-center-img">
          <van-image width="100" :src="exampleImage_02"></van-image>
        </div>
      </div>
    </div>
    <!-- 下半部分 -->
    <div class="main-b">
      <div class="main-b-box">
        <div class="bill-t">常用功能</div>
        <div class="bill-b">
          <div class="bill-b-item" v-for="(item, index) in commonFunList" :key="index" @click="toFunPage(item.to)">
            <div class="bill-icon">
              <van-image width="35" :src="item.icon"></van-image>
            </div>
            <div class="bill-b-item-text">{{ item.text }}</div>
          </div>
        </div>
      </div>
      <div class="main-b-box">
        <div class="bill-t">其他</div>
        <div class="bill-b-row">
          <div class="bill-b-row-item" v-for="(item, index) in otherList" :key="index">
            <div class="bill-b-row-icon">
              <van-image width="25" :src="item.icon"></van-image>
            </div>
            <div class="bill-b-row-text">{{ item.text }}</div>
            <div class="bill-b-row-to"><van-icon name="arrow" color="#333" /></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="Mine">
// 我的
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'

import exampleImage_01 from '@/image/avater_01.jpg'
import exampleImage_02 from '@/image/help_01.jpg'

import exampleBillImage_01 from '@/icon/068_账单管理.svg'
import exampleBillImage_02 from '@/icon/068_购物清单.svg'
import exampleBillImage_03 from '@/icon/068_存钱计划.svg'
import exampleBillImage_04 from '@/icon/068_预算设置.svg'
import exampleBillImage_05 from '@/icon/068_收支分类.svg'
import exampleBillImage_06 from '@/icon/068_账单报告.svg'
import exampleBillImage_07 from '@/icon/069_汇率换算.svg'
import exampleBillImage_08 from '@/icon/069_年度报告.svg'

import exampleBillImage_09 from '@/icon/069_帮助.svg'
import exampleBillImage_10 from '@/icon/069_客服.svg'

let avaterImg = ref(exampleImage_01)
const router = useRouter()

// 常用功能列表
let commonFunList = [
  {
    icon: exampleBillImage_01,
    text: '账单管理',
    to: ''
  },
  {
    icon: exampleBillImage_02,
    text: '购物清单',
    to: '/shoppingList'
  },
  {
    icon: exampleBillImage_03,
    text: '存钱计划',
    to: '/savingsPlan'
  },
  {
    icon: exampleBillImage_04,
    text: '预算设置',
    to: '/budgetSetting'
  },
  {
    icon: exampleBillImage_05,
    text: '收支分类',
    to: ''
  },
  {
    icon: exampleBillImage_06,
    text: '账单报告',
    to: ''
  },
  {
    icon: exampleBillImage_07,
    text: '汇率',
    to: ''
  },
  {
    icon: exampleBillImage_08,
    text: '年度报告',
    to: '/annualReport'
  },
]

// 其他 列表
let otherList = [
  {
    icon: exampleBillImage_09,
    text: '帮助'
  },
  {
    icon: exampleBillImage_10,
    text: '客服'
  },
]

function toFunPage(path: string) {
  console.log(path)
  router.push(path)
}

</script>

<style scoped lang="less">
@gabelMargin : 20px; // 全局margin
@gabelBgColor : rgb(181, 202, 161);
@garyFontColor : rgb(125, 125, 125);

.mine {
  background-color: rgb(255, 255, 255);
  height: 100vh;
}

.main-t {
  background-color: @gabelBgColor;
  height: 250px;

  .panel {
    background-color: #fff;
    border-radius: 50px;
    padding: 30px;
    margin: @gabelMargin;
    margin-top: 30px;
    font-size: 48px;
    position: relative;
    display: flex;
    align-items: center;
    font-size: 30px;

    .panel-l {
      width: 25%;

      .avter {
        margin-right: 10px;
        border-radius: 50%;
        overflow: hidden;

        img {
          width: 100%;
        }
      }
    }

    .panel-r {
      width: 75%;

      .username {
        font-size: 40px;
        overflow: hidden;
      }

      .userTag {
        font-size: 30px;
        color: gray;
      }
    }

    .panel-r>div {
      margin: 5px 0;
    }
  }

  .help-center {
    background-color: #fff;
    border-radius: 50px;
    box-shadow: 0 0 10px 3px rgb(221, 221, 221);
    padding: 30px;
    margin: @gabelMargin;
    margin-top: 30px;
    font-size: 48px;
    display: flex;
    justify-content: space-between;
    overflow: hidden;

    .help-center-text {
      font-size: 35px;

      .help-center-text-t {
        font-weight: 600;
        margin-bottom: 5px;
      }

      .help-center-text-b {
        font-size: 30px;
        color: gray;
      }
    }

    .help-center-img {
      margin-top: -20px;
      margin-bottom: -100px;
      margin-right: -50px;
    }
  }
}

.main-b {
  height: 50%;
  font-size: 35px;
  margin: @gabelMargin;
  margin-top: 350px;

  .bill-t {
    font-weight: 600;
    margin: 30px 0;
  }

  .bill-b-row {
    .bill-b-row-item {
      display: flex;
      align-items: center;

      margin: 20px 0;

      .bill-b-row-icon {
        margin-left: 10px;
        margin-right: 20px;
      }

      .bill-b-row-text {
        width: 90%;
      }
    }
  }

  .bill-b {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;

    .bill-b-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 10px 5px;
      padding: 15px 10px;
      border-radius: 40px;
      width: 20%;
      background-color: rgb(248, 248, 248);

      .bill-b-item-text {
        font-size: 30px;
      }
    }
  }
}
</style>